<script setup>
import { ref, watch } from 'vue'

// deep 在vue3中不生效
defineOptions({
  options: { styleIsolation: 'shared' },
})

// 自定义事件
const emit = defineEmits(['getList'])

// 选项分类
const categoriesSelect = ref([
  {
    label: '推荐',
    value: '推荐',
    subOpts: [
      {
        label: '推荐',
        value: '推荐',
      },
      {
        label: '语种',
        value: '语种',
      },
      {
        label: '风格',
        value: '风格',
      },
      {
        label: '场景',
        value: '场景',
      },
      {
        label: '情感',
        value: '情感',
      },
      {
        label: '主题',
        value: '主题',
      },
    ],
  },
  {
    label: '推荐歌单',
    value: 'recommend',
    subOpts: [{ label: '推荐歌单', value: 'recommend' }],
  },
])

// 二级里面数据
const subCategoriesSelect = {
  推荐: [{ label: '推荐歌单', value: '推荐歌单', checked: true }],
  语种: [
    { label: '华语', value: '华语', checked: true },
    { label: '欧美', value: '欧美' },
    { label: '日语', value: '日语' },
    { label: '韩语', value: '韩语' },
    { label: '粤语', value: '粤语' },
  ],
  风格: [
    { label: '流行', value: '流行', checked: true },
    { label: '摇滚', value: '摇滚' },
    { label: '民谣', value: '民谣' },
    { label: '电子', value: '电子' },
    { label: '舞曲', value: '舞曲' },
    { label: '说唱', value: '说唱' },
    { label: '轻音乐', value: '轻音乐' },
    { label: '爵士', value: '爵士' },
    { label: '乡村', value: '乡村' },
    { label: 'R&B/Soul', value: 'R&B/Soul' },
    { label: '古典', value: '古典' },
    { label: '民族', value: '民族' },
    { label: '英伦', value: '英伦' },
    { label: '金属', value: '金属' },
    { label: '朋克', value: '朋克' },
    { label: '蓝调', value: '蓝调' },
    { label: '雷鬼', value: '雷鬼' },
    { label: '世界音乐', value: '世界音乐' },
    { label: '拉丁', value: '拉丁' },
    { label: 'New Age', value: 'New Age' },
    { label: '古风', value: '古风' },
    { label: '后摇', value: '后摇' },
    { label: 'Bossa Nova', value: 'Bossa Nova' },
  ],
  场景: [
    { label: '清晨', value: '清晨', checked: true },
    { label: '夜晚', value: '夜晚' },
    { label: '学习', value: '学习' },
    { label: '工作', value: '工作' },
    { label: '午休', value: '午休' },
    { label: '下午茶', value: '下午茶' },
    { label: '地铁', value: '地铁' },
    { label: '驾车', value: '驾车' },
    { label: '运动', value: '运动' },
    { label: '旅行', value: '旅行' },
    { label: '散步', value: '散步' },
    { label: '酒吧', value: '酒吧' },
  ],
  情感: [
    { label: '怀旧', value: '怀旧', checked: true },
    { label: '清新', value: '清新' },
    { label: '浪漫', value: '浪漫' },
    { label: '伤感', value: '伤感' },
    { label: '治愈', value: '治愈' },
    { label: '放松', value: '放松' },
    { label: '孤独', value: '孤独' },
    { label: '感动', value: '感动' },
    { label: '兴奋', value: '兴奋' },
    { label: '快乐', value: '快乐' },
    { label: '安静', value: '安静' },
    { label: '思念', value: '思念' },
  ],
  主题: [
    { label: '综艺', value: '综艺', checked: true },
    { label: '影视原声', value: '影视原声' },
    { label: 'ACG', value: 'ACG' },
    { label: '儿童', value: '儿童' },
    { label: '校园', value: '校园' },
    { label: '游戏', value: '游戏' },
    { label: '70后', value: '70后' },
    { label: '80后', value: '80后' },
    { label: '90后', value: '90后' },
    { label: '网络歌曲', value: '网络歌曲' },
    { label: 'KTV', value: 'KTV' },
    { label: '经典', value: '经典' },
    { label: '翻唱', value: '翻唱' },
    { label: '吉他', value: '吉他' },
    { label: '钢琴', value: '钢琴' },
    { label: '器乐', value: '器乐' },
    { label: '榜单', value: '榜单' },
    { label: '00后', value: '00后' },
  ],
}

// 下拉菜单
const tyDropdown = ref(null)

// 选中方法
const handleItem = (value, index) => {
  let cItem = categoriesSelect.value[index]
  let nextItem = categoriesSelect.value[index + 1]
  let subItem = subCategoriesSelect[value]

  // 更新下一级数据
  if (index === 0) {
    nextItem.subOpts = subItem
    nextItem.label = subItem[0].label
    nextItem.value = subItem[0].value
  }
  // 替换选中文本
  cItem.label = value
  cItem.value = value
}

watch(
  () => categoriesSelect.value[1].value,
  (newVal) => {
    // 获取数据
    emit('getList', newVal)
  }
)
</script>

<template>
  <view class="ty-dropdow-menu">
    <u-dropdown
      ref="tyDropdown"
      active-color="#465cff"
    >
      <u-dropdown-item
        v-for="(item, index) in categoriesSelect"
        :key="index"
        v-model="item.value"
        :title="item.label"
        :options="item.subOpts"
        @change="handleItem(item.value, index)"
      ></u-dropdown-item>
    </u-dropdown>
  </view>
</template>

<style lang="scss" scoped>
.ty-dropdow-menu {
  :deep(.u-dropdown__menu) {
    width: 50%;
  }
}
</style>
